<template>
  <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-phone">
    <el-form-item prop="username">
      <el-input prefix-icon="el-icon-username" clearable class="text-style" v-model="loginForm.username" placeholder="请输入用户名或手机号" @blur="checkForm('loginForm')"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        auto-complete="0"
        prefix-icon="el-icon-pass"
        class="text-style"
        type="password"
        @keyup.native="checkForm('loginForm')"
        v-model="loginForm.password"
        @keyup.enter.native="login(1)"
        placeholder="请输入用户密码"
        show-password
        style="font-size: 30px"
      ></el-input>
    </el-form-item>
    <div class="submit">
      <el-button type="primary" style="width: 100%" @click="logInBtn">登 录</el-button>
    </div>
    <div class="sub-title" style="color: white; margin-top: 0px">
      <div>
        <a @click="toReg">注册账号</a>
      </div>
      <div style="display: none">
        <a>子用户登录</a>
      </div>
      <div class="inline">
        <a>忘记密码</a>
      </div>
    </div>
  </el-form>
</template>
<style lang="less" scoped>
/deep/ .el-icon-username {
  background: url('../../assets/login04.png') center center no-repeat;
  background-size: 30px;
}
/deep/ .el-icon-username:before {
  content: '替';
  font-size: 16px;
  visibility: hidden;
}

/deep/ .el-icon-pass {
  background: url('../../assets/login03.png') center center no-repeat;
  background-size: 30px;
}
/deep/ .el-icon-pass:before {
  content: '替';
  font-size: 16px;
  visibility: hidden;
}
</style>
<script>
import { mapState } from 'vuex'
import { Logins } from './login'
import { setStore } from '../../utils/store'
import CryptoJS from '../../utils/CryptoJS'
export default {
  data() {
    return {
      loginForm: {
        grant_type: 'password',
        username: '',
        password: '',
        captcha: false,
        code: '6nm3',
        scope: 'server',
      },
      rules: {
        // 验证规则登录
        username: [{ required: true, message: '请输入用户名或手机号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
      },
    }
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    logInBtn() {
      this.$refs.loginForm.validate((valid) => {
        if (!valid) return false
        this.login()
      })
    },
    async login() {
      try {
        this.loginForm.password = CryptoJS.encrypt(this.loginForm.password) //密码加密
        const { data } = await Logins(this.loginForm)
        console.log(data)
        if (data.code === 0) {
          this.$notify({ message: '登陆成功', type: 'success', position: 'bottom-left' })
          setStore({
            name: 'logininfo',
            content: {
            token: 'Basic cGFyazpwYXJr',
            },
          }),
            this.$store.commit('Setuser', data.data)
          this.$router.push({
            path: '/home/index',
          })
          this.$store.commit('Setuser', data.data)
          this.$router.push({ path: '/', })
          this.loginForm.password = CryptoJS.decrypt(this.loginForm.password) //密码解密
        } else {
          this.$notify({ message: data.msg, type: 'error', position: 'bottom-right' })
          this.loginForm.password = CryptoJS.decrypt(this.loginForm.password) //密码解密
        }
      } catch (error) {
        this.loginForm.password = CryptoJS.decrypt(this.loginForm.password) //密码解密
        console.log(error)
      }
    },
    checkForm() {},
    toReg() {
      this.$router.push({ path: '/reg' })
    },
  },
}
</script>
